<template>
  <!-- IEO -->
  <div class="ieo_container">
    <div class="wrapper">
      <div class="v-header-box">
        <Row type="flex" justify="space-between" align="top" class="code-row-bg">
          <Col :xs="24" :lg="9" :xxl="9">
            <img src="../../assets/images/ieo_header.png" alt="ieo_header.png" class="v-img">
          </Col>
          <Col :xs="24" :lg="14" :xxl="14">
            <div class="v-text-box">
              <!-- <h1 class="v-h1">{{$t("homeContentLocale.c1")}}</h1> -->
              <h1 class="v-h1">IOT</h1>
              <p class="v-text"><span>{{timeLoading}}</span></p>
              <p class="v-text">{{$t("homeContentLocale.c3")}} {{startTime}} -  {{endTime}}</p>
              <p class="v-text" v-if="timeLoadingType">{{$t("homeContentLocale.c4")}} {{time.D}}{{$t("homeContentLocale.c25")}} {{time.h}}:{{time.m}}:{{time.s}}</p>
            </div>
          </Col>
        </Row>
      </div>

      <!-- 功能模块 -->
      <div class="v-ieo-main">
        <div class="v-ieo-top">
          <Row type="flex" justify="space-between" align="top" class="code-row-bg">
            <Col :xs="24" :lg="9" :xxl="9">
              <div class="v-tetx-left">
                <h4 class="v-h4">{{$t("homeContentLocale.c5")}}</h4>
                <h1 class="v-h1">{{saleAmount}} IOT</h1>
                <h4 class="v-h4">{{$t("homeContentLocale.c6")}}</h4>
                <div class="v-text">
                  <p>1 IOT =</p>
                  <p>{{converNumData[0]}} USDT</p>
                </div>
                <div class="v-text">
                  <p>1 IOT =</p>
                  <p>{{converNumData[1]}} BTC</p>
                </div>
                <div class="v-text">
                  <p>1 IOT =</p>
                  <p>{{converNumData[2]}} ETH</p>
                </div>
              </div>
            </Col>
            <Col :xs="24" :lg="14" :xxl="14">
              <div class="v-text-right">
                <h3 class="v-h3">{{$t("homeContentLocale.c7")}}</h3>
                <div class="v-form-box">
                  <div class="v-info">
                    <div class="v-left">
                      <Select v-model="modelSelect" @on-change="selectChange" size="large" style="width:100px" placeholder="Please Select" :not-found-text="noDataText">
                        <Option v-for="item in citySelectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </div>
                    <div class="v-middle">
                      <Input v-model="valueInput" @on-change="onInputChange" placeholder="Please input the subscription amount" />
                    </div>
                    <div class="v-right v-text"><h3 class="v-h3">{{modelSelect}}</h3><h3 class="v-h3" @click="onAllInClick" style="cursor: pointer; color:#3399ff;">All In</h3></div>
                  </div>
                  <!-- 平均 -->
                  <div class="v-text-center">{{$t("homeContentLocale.c8")}} {{balance}} {{modelSelect}}</div>
                  <!-- 可用 -->
                  <div class="v-info">
                    <div class="v-left">
                      <span class="v-text">{{$t("homeContentLocale.c9")}}</span>
                    </div>
                    <div class="v-middle">
                      <h3 class="v-h3"><span>{{valueInputCount}}</span> IOT</h3>
                    </div>
                  </div>
                  <div class="v-button-box">
                    <Button type="primary" @click="onStartClick" long>{{$t("homeContentLocale.c10")}}</Button>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </div>
        <div class="v-ieo-table">
          <h3 class="v-h2-title">{{$t("homeContentLocale.c11")}}</h3>
          <div class="v-table-box" v-if="isLogin">
            <div class="v-table" v-if="tableDataList.length != 0" >
              <Table border :columns="columnsList" :data="tableDataList" :no-data-text="noDataText" ></Table>
            </div>
            <div class="v-first" v-else>
              <img src="../../assets/images/ieo_none.png" alt="login_first.png" class="v-img">
              <p class="v-text">{{$t("homeContentLocale.c13")}}</p>
            </div>
          </div>
          <div class="v-table-box" v-else>
            <div class="v-first">
              <img src="../../assets/images/login_first.png" alt="login_first.png" class="v-img">
              <router-link to="/login" class="v-ahover">{{$t("homeContentLocale.c12")}}</router-link>
            </div>
          </div>
        </div>
      </div>

      <!-- 介绍 -->
      <div class="v-ieo-bottom">
        <h1 class="v-h1-title">{{$t("homeContentLocale.c18")}}</h1>
        <div class="v-text-box">
          <h3 class="v-h3">
            <img src="../../assets/images/ieo_web.png" alt="ieo_web.png" class="v-img">
            <a href="http://www.iotcoin.live" target="_blank" rel="noopener noreferrer" class="v-ahover">{{$t("homeContentLocale.c19")}}</a>
          </h3>
          <p class="v-text">{{$t("homeContentLocale.c20")}}</p>
        </div>
        <div class="v-img-box">
          <img src="../../assets/images/ieo_core_advantage.png" alt="ieo_web.png" class="v-img">
          <img src="../../assets/images/ieo_criterion_of_publication.png" alt="ieo_web.png" class="v-img">
          <img src="../../assets/images/ieo_route_planning.png" alt="ieo_web.png" class="v-img">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeLoadingType: false,
      timeLoading: this.$t("homeContentLocale.c23"),
      time: {
        D: "0",
        h: "0",
        s: "0",
        m: "0"
      },
      realTimeDate: 0,
      startTime: 0,
      endTime: 0,
      modelSelect: 'BTC',
      valueInputCount: 0,
      valueInput: '',
      citySelectList: [],
      noDataText: this.$t("homeContentLocale.c13"),
      columnsList: [
        {
            title: this.$t("homeContentLocale.c14"),
            key: 'createTime'
        },
        {
            title: this.$t("homeContentLocale.c15"),
            key: 'fee'
        },
        {
            title: this.$t("homeContentLocale.c16"),
            key: 'amount'
        },
        {
            title: this.$t("homeContentLocale.c17"),
            key: 'symbol'
        }],
      tableDataList: [],
      wgp: '',
      converNumData: [],
      price: '',
      symbolPrice: '',
      saleAmount: 0,   //  数量
      balance: 0,      //　币种可用数量
    };
  },
  computed: {
    isLogin: function () {
      return this.$store.getters.isLogin;
    },
  },
  methods: {
    onAllInClick() {
      let _that = this;
      _that.valueInput = _that.balance;
      _that.onInputChange()
    },
    onInputChange() {
      let _that = this;
      let input = _that.valueInput;
      let balance = _that.balance;
      let selectList = _that.citySelectList;
      if (input <= balance) {
        if (input != 0) {
          selectList.forEach( el => {
            //换算汇率
            if (el.value === _that.modelSelect) {
              let wgp = (el.symbolPrice / el.price).toFixed(8);
              let num = (input * wgp).toFixed(8);
              // let converNum = (el.price / num).toFixed(8);
              _that.valueInputCount = num;
            }
          });
        }
      } else {
        _that.valueInputCount = 0;
        _that.valueInput = '';
      }
    },
    selectChange() {
      let _that = this;
      _that.valueInputCount = 0;
      _that.valueInput = '';
      _that.getWallet();
    },
    // 币种信息
    getWallet() {
      let _that = this;
      if(_that.isLogin) {
        _that.$http
          .post(_that.host + _that.api.uc.wallet + _that.modelSelect, {})
          .then( res => {
            // console.log( res);
            let resp = res.body;
            _that.balance = resp.data.balance;
            // this.assets = (resp.data && resp.data.balance) || '';
          });
      }
    },
    // 提交按钮
    onStartClick() {
      let _that = this;
      if(_that.isLogin && _that.valueInput != '') {
        this.$http
          .post(_that.host + '/uc/asset/fastInfo/exchange', {
            "symbol": _that.modelSelect,
            "amount": _that.valueInput,
          })
          .then(response => {
            let resp = response.body;
            // console.log(resp);
            if(resp.code == 0){
              _that.$Message.info("success");
              _that.selectChange();
              _that.loadIeoTable();
            }else{
              _that.$Message.error(resp.message);
            }
        });

      } else {
        _that.$Message.error(_that.$t("common.logintip"));
      }
    },
    // 当前时间
    realTime() {
      var date = new Date();  
      var year = date.getFullYear().toString().padStart(4, "0"); //获取当前年份  
      var month = (date.getMonth() + 1).toString().padStart(2, "0"); //获取当前月份  
      var day = date.getDate().toString().padStart(2, "0");; //获取当前日  
      // var day=date.getDay(); //获取当前星期几  
      var hour = date.getHours().toString().padStart(2, "0");; //获取小时  
      var minute = date.getMinutes().toString().padStart(2, "0");; //获取分钟  
      var second = date.getSeconds().toString().padStart(2, "0");; //获取秒
      var t = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      this.realTimeDate = t;
      // console.log(t);
    },
    // 列表
    loadIeoInfo() {
      let _that =this;
      let param = {};
      this.$http
        .post(this.host + "/uc/asset/fastInfo", param)
        .then( res => {
          // console.log(res);
          let resp = res.body;
          if(resp.code == 0){
            let converNums = []
            let selectList = resp.data.symbolList;
            selectList.forEach( el => {
              el.value = el.symbol;
              el.label = el.symbol;
  
              //换算汇率
              let wgp = (el.symbolPrice / el.price).toFixed(8);
              let num = (1 * wgp).toFixed(8);
              let converNum = (el.price / num).toFixed(8);
              converNums.push(converNum)

            });
            this.citySelectList = selectList;
            this.converNumData = converNums;
            this.saleAmount = resp.data.ieoEmption.saleAmount;
            this.startTime = resp.data.ieoEmption.startTime;
            this.endTime = resp.data.ieoEmption.endTime;

            var time = this.realTimeDate;
            var date1 = resp.data.ieoEmption.startTime;
            var date2 = resp.data.ieoEmption.endTime;

            var d1 = new Date(date1.replace(/\-/g, "\/"));
            var d2 = new Date(date2.replace(/\-/g, "\/"));
            var d3 = new Date(time.replace(/\-/g, "\/"));
            // 时间比较
            if(d3 < d1) {
              // 未开始
              this.timeLoading = this.$t("homeContentLocale.c23")
            } else if (d3 >= d1 && d3 <= d2) {
              // 抢购中
              this.timeLoadingType = true;
              this.timeLoading = this.$t("homeContentLocale.c2")
              this.setEndTime()
            } else {
              this.timeLoading = this.$t("homeContentLocale.c24")
              // end
            }
            // console.log(converNums);
          } else {
            _that.$Message.error(this.$t("common.logintip"));
          }
        });
    },
    // 倒计时
    setEndTime() {
      let that = this;
      let interval = setInterval(function timestampToTime() {
        var date = new Date(that.endTime) - new Date(); //计算剩余的毫秒数
        if (date < 0) {
          that.isEnd = true;
          that.time = {
            D: "00",
            h: "00",
            s: "00",
            m: "00"
          };
          clearInterval(interval);
        } else {
          that.time.D = parseInt(date / 1000 / 60 / 60 / 24, 10); //计算剩余的天
          if (that.time.D < 10) {
            that.time.D = "0" + that.time.D;
          }
          that.time.h = parseInt((date / 1000 / 60 / 60) % 24, 10); //计算剩余的小时
          if (that.time.h < 10) {
            that.time.h = "0" + that.time.h;
          }
          that.time.m = parseInt((date / 1000 / 60) % 60, 10); //计算剩余的分钟
          if (that.time.m < 10) {
            that.time.m = "0" + that.time.m;
          }
          that.time.s = parseInt((date / 1000) % 60, 10); //计算剩余的秒数
          if (that.time.s < 10) {
            that.time.s = "0" + that.time.s;
          }
          return that.time.D + that.time.h + that.time.m + that.time.s;
        }
      }, 1000);
    },
    loadIeoTable() {
      let _that =this;
      let params = {
        pageNo: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
        memberId: 0,
        symbol: '',
        type: 28
      };
      if(_that.isLogin) {
        _that.$http.post(_that.host + "/uc/asset/transaction", params).then(response => {
          var resp = response.body;
          // console.log(resp);
          if (resp.code == 0) {
            _that.loading = false;
            if (resp.data) {
              let trueData = resp.data;
              _that.tableDataList = trueData.content;
            }
          } else {
            _that.$Message.error(resp.message);
          }
        });

      }
    }
  },
  created: function() {
    this.realTime();
    this.loadIeoInfo();
    this.getWallet();
    this.loadIeoTable();
  },
  beforeDestroy() {
    clearInterval(this.time);
  }
};
</script>

<style lang="scss" scoped>
>>>.ivu-table-wrapper {
  border: 1px solid #e8eaec;
}
>>>.ivu-table-overflowX, >>>.ivu-table-tip {overflow: initial;}
.ieo_container {
  min-height: 600px;
  padding-top: 60px;
  background-image: url('../../assets/images/ieo_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 60px;
  background-color: #fff;
  .wrapper {
    padding: 0 14%;
  }
  .v-header-box {
    margin: 70px 0;
    padding: 40px;
    box-shadow: 0 -6px 10px rgba(0, 0, 0, .3);
    border-radius: 15px;
    background-color: #fff;
    .v-img {
      width: 100%;
    }
    .v-text-box {
      text-align: left;
      .v-h1 {padding-bottom: 5px; font-size: 32px;}
      .v-text {
        font-size: 18px;
        padding-top: 15px;
        &:nth-child(2) {padding-bottom: 5px;}
        span {
          z-index: 9; 
          position: relative;
          display: inline-block;
          padding: 5px 15px;
          font-size: 12px;
          color: #fff;
          &::before { 
            content: ''; /* To generate the box */ 
            position: absolute; 
            top: 0; 
            right: 0; 
            bottom: 0; 
            left: 0; 
            z-index: -1; 
            border-radius: 5px;
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ee8831+0,e8b93c+90 */
            background: rgb(238,136,49); /* Old browsers */
            background: -moz-linear-gradient(left,  rgba(238,136,49,1) 0%, rgba(232,185,60,1) 90%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  rgba(238,136,49,1) 0%,rgba(232,185,60,1) 90%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  rgba(238,136,49,1) 0%,rgba(232,185,60,1) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee8831', endColorstr='#e8b93c',GradientType=1 ); /* IE6-9 */

            transform: skew(-35deg); 
          }
        }
      }
    }
  }
  .v-ieo-main {
    padding: 15px 0 40px;
    .v-ieo-top {
      padding: 5px 0 20px;
      .v-tetx-left {
        min-height: 302px;
        padding: 15px;
        text-align: left;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(111, 111, 111, .2);
        background-color: #fff;
        .v-h1 {
          padding: 15px 0;
          border-bottom: 1px solid #f1f1f1;
        }
        .v-h4 {font-size: 16px;}
        .v-h4:nth-child(3) {padding: 15px 0;}
        .v-text {
          position: relative;
          padding: 5px 0;
          p {
            font-size: 20px;
            font-weight: bold;
            &:last-child {
              position: absolute;
              top: 50%;
              right: 15px;
              display: inline-block;
              font-size: 16px;
              font-weight: initial;
              transform: translateY(-50%);
            }
          }
        }
      }
      .v-text-right {
        min-height: 302px;
        padding: 15px;
        text-align: left;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(111, 111, 111, .2);
        background-color: #fff;
        >>>.ivu-select-large.ivu-select-single .ivu-select-selection {
          height: 40px;
          border: initial;
          border-right: 1px solid #dcdee2;
          border-radius: 0;
          box-shadow: initial;
        }
        >>> .ivu-select-large.ivu-select-single .ivu-select-selection .ivu-select-placeholder, >>>.ivu-select-large.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
          height: 40px;
          line-height: 40px;
        }
        >>>.ivu-input {
          height: 40px;
          border: initial;
          &:focus {box-shadow: initial;}
        }
        .v-h3 {font-size: 18px;}
        .v-form-box {
          padding: 15px 0 0;
          .v-info {
            display: flex;
            flex-direction: row;
            margin: 15px 0;
            border: 1px solid #dcdee2;
          }
          .v-text-center {
            text-align: right;
            color: #999;
          }
          .v-button-box {
            margin: 15px auto;
            >>>.ivu-btn {
              margin-top: 10px;
              font-size: 18px;
            }
          }
        }
        .v-middle {
          flex-grow: 1;
          .v-h3 {
            height: 40px;
            padding: 0 30px;
            line-height: 40px;
            text-align: right;
          }
        }
 
        .v-left {
          flex: 0 1 100px;
          .v-text {
            display: block;
            text-align: center;
            border-right: 1px solid #dcdee2;
          }
        }
        .v-right {
          flex: 0 1 160px;
          padding-right: 30px;
          text-align: right;
          .v-h3 {
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
          }
        }
        .v-text {
          height: 40px;
          line-height: 40px;
          font-weight: bold;
        }
      }
    }
    .v-ieo-table {
      padding: 30px;
      margin-top: 20px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(111, 111, 111, .2);
      background-color: #fff;
      .v-h2-title {
        font-size: 18px;
      }
      .v-table-box {padding: 30px 0 0;}
      .v-first {
        padding: 5px 0;
        text-align: center;
        .v-img {
          display: block;
          margin: 15px auto 10px;
        }
        .v-ahover {
          display: inline-block;
          padding: 15px 50px;
          border-radius: 6px;
          box-shadow: 0 6px 12px rgba(33, 96, 236, 0.3);
          color: #fff;
          background-color: rgba(33, 96, 236, 1);
        }
      }
    }
  }

  .v-ieo-bottom {
    margin-bottom: 60px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(111, 111, 111, .2);
    overflow: hidden;
    background-color: #fff;
    .v-h1-title {
      padding: 30px 30px 30px 130px;
      color: #fff;
      background-image: url('../../assets/images/ieo_bg2.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .v-h3 {
      padding: 40px 30px 0;
      font-size: 22px;
      .v-img, .v-ahover {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        color: #333;
      }
      .v-img{margin-right: 10px;}
    }
    .v-text {
      padding: 30px;
      font-size: 18px;
      color: #515a6e;
    }
    .v-img-box {
      .v-img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>
